<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false">
				<ButtonGroup slot="extra">

					<Button type="primary" size="small" icon="md-refresh" @click="refreshData"></Button>
				</ButtonGroup>
				<TabPane label="配件询价单列表" name="repair">
					<div class="form_group">
						<div class="inputbox">
							<span>询价单号</span>
							<Input style="width:180px;" v-model="params.orderNum"></Input>
						</div>
						<div class="inputbox">
							<span>类型</span>
							<Select style="width:180px;" v-model="params.carTypeId">
								<Option value="">全部</Option>
								<Option v-for="(item,index) in carTypeList" :key="index" :value="item.typeId" >
									{{item.typeName}}
								</Option>
							</Select>
						</div>
						<div class="inputbox">
							<span>品牌</span>
							<Select style="width:180px;" v-model="params.carBrandId">
								<Option value="">全部</Option>
								<Option v-for="(item,index) in carBrandList" :key="index" :value="item.brandId">
									{{item.brandName}}
								</Option>
							</Select>
						</div>
						<div class="inputbox">
							<Button type="primary" @click="refreshData">查询</Button>
						</div>
					</div>
					<table-view ref="tableView" :tableCol='tableCol' :params="params" :requestUrl='requestUrl'></table-view>
				</TabPane>
			</Tabs>
		</Card>
	</div>
</template>

<script>
	import tableView from '../../components/table'
	import {
		formatDate
	} from '../utils/time.js'
	export default {
		components: {
			tableView
		},
		data() {
			return {
				requestUrl: '/partsInquiry/list',
				tableCol: [{
						title: '序号',
						type: 'index',
						width: 70
					},
					{
						title: '类型',
						key: 'typeName'
					}, {
						title: '询价单号',
						key: 'orderNum',
                        minWidth: 120
					}, {
                        title: '品牌',
                        key: 'brandName'
                    }, {
						title: '称呼',
						key: 'buyerName'
					}, {
						title: '联系人',
						key: 'tel'
					}, {
						title: '状态',
						key: 'state',
                        render: (h, params) => {
                            let obj = {
                                0: "发布中",
                                1: "报价中",
                                2: "已付款",
                                3: "发货中",
                                4: "已收货",
                                5: "订单完成",
                                6: "申请退货",
                                7: "退货中",
                                8: "退款中",
                                9: "退货完成"
                            };
                            return h("div", obj[params.row.state]);
                        }
					}, {
						title: '发布日期',
						render: (h, params) => {
							return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd'))
						}
					}, {
						title: '操作',
						key: 'action',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {

                                            this.$router.push({
                                                path:'/partsInquiryDetail',
                                                query: {
                                                    id: params.row.id
                                                }
                                            });
										}
									}
								}, '报价')
							])
						}
					}

				],
				params: {
					pageNo: 1,
					pageSize: 10,
					factoryId: sessionStorage.getItem("factoryId"),
                    orderNum: '',
                    carTypeId: '',
                    carBrandId: ''
				},
                carTypeList: [],
                carBrandList: []
			}
		},
		mounted() {
			// 查询车辆类型列表
            this.queryCarTypeList();
            //查询品牌列表
            this.queryCarBrandList();
		},
		methods: {
			refreshData() {
				this.$refs['tableView'].getData()
			},
			queryCarTypeList() {
				this.$http.post('/cartype/list', {
					pageNo: '1',
					pageSize: '100000'
				}).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.carTypeList = res.data.data.rows;
						}

					}
				});
			},
			queryCarBrandList() {
				this.$http.post('/brand/list').then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.carBrandList = res.data.data;
						}

					}
				});
			}
		}
	}
</script>
<style scoped>
.content-card{
	width: 100%;
}
.form_group {
	margin-bottom: 15px;
}
.inputbox {
	display: inline-block;
	margin-right: 15px;
}
.inputbox span {
	margin-right: 5px;
}
</style>
<style>
	.ivu-tabs {
		overflow: inherit;
	}
</style>